<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>控制后台</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/demos/css/console2.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        用户统计
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md2 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">今日注册</div>
                                    <div class="count pear-text" style="font-size: 20px;font-weight: bold"><?=$user_count_today?></div>
                                </div>
                            </div>
                            <div class="layui-col-md2 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">3天内注册</div>
                                    <div class="count pear-text" style="font-size: 20px;font-weight: bold"><?=$user_count_day3?></div>
                                </div>
                            </div>
                            <div class="layui-col-md2 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">7天内注册</div>
                                    <div class="count pear-text" style="font-size: 20px;font-weight: bold"><?=$user_count_day7?></div>
                                </div>
                            </div>
                            <div class="layui-col-md2 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">30天内注册</div>
                                    <div class="count pear-text" style="font-size: 20px;font-weight: bold"><?=$user_count_day30?></div>
                                </div>
                            </div>
                            <div class="layui-col-md2 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">今日登录</div>
                                    <div class="count pear-text" style="font-size: 20px;font-weight: bold"><?=$user_login_today?></div>
                                </div>
                            </div>
                            <div class="layui-col-md2 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">总用户数</div>
                                    <div class="count pear-text" style="font-size: 20px;font-weight: bold"><?=$user_count?></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        用户分析
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form top-search-from" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">年份</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="created_at_user" name="created_at">
                                </div>
                            </div>
                            <input type="hidden" name="type" value="user">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label"></label>
                                <button type="submit" class="pear-btn pear-btn-md pear-btn-primary" lay-submit="" lay-filter="statistics_user">
                                    <i class="layui-icon layui-icon-search"></i>查询
                                </button>
                            </div>
                        </form>
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts_user" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        充值统计
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">总充值金额</div>
                                    <div class="count pear-text" style="font-size: 20px;font-weight: bold"><?=$recharge_amount?></div>
                                </div>
                            </div>

                            <?php foreach ($recharge_data as $recharge): ?>
                            <div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title"><?=$recharge['pay_type_text']?></div>
                                    <div class="count pear-text"
                                         style="font-size: 20px;font-weight: bold"><?=$recharge['pay_amount']?></div>
                                </div>
                            </div>
                            <?php endforeach; ?>

                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        充值分析
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form top-search-from" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">年份</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="created_at_recharge" name="created_at">
                                </div>
                            </div>
                            <input type="hidden" name="type" value="recharge">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label"></label>
                                <button type="submit" class="pear-btn pear-btn-md pear-btn-primary" lay-submit="" lay-filter="statistics_recharge">
                                    <i class="layui-icon layui-icon-search"></i>查询
                                </button>
                            </div>
                        </form>
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts_recharge" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        提现统计
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">

                            <?php foreach ($withdrawal_data as $withdrawal): ?>
                            <div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title"><?=$withdrawal['pay_type_text']?></div>
                                    <div class="count pear-text"
                                         style="font-size: 20px;font-weight: bold"><?=$withdrawal['pay_amount']?></div>
                                </div>
                            </div>
                            <?php endforeach; ?>

                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        提现分析
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form top-search-from" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">年份</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="created_at_withdrawal" name="created_at">
                                </div>
                            </div>
                            <input type="hidden" name="type" value="withdrawal">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label"></label>
                                <button type="submit" class="pear-btn pear-btn-md pear-btn-primary" lay-submit="" lay-filter="statistics_withdrawal">
                                    <i class="layui-icon layui-icon-search"></i>查询
                                </button>
                            </div>
                        </form>
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts_withdrawal" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--</div>-->
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script>
    const StatisticsApi = '/app/admin/index/statistics'

    layui.use('laydate', function() {
        const dd = new Date();
        const y = dd.getFullYear();// 获取今日年份

        var laydate = layui.laydate;
        laydate.render({
            elem: '#created_at_user', //指定元素
            type:'year',
            format:'yyyy',
            value:y,
        });

        laydate.render({
            elem: '#created_at_recharge', //指定元素
            type:'year',
            format:'yyyy',
            value:y,
        });

        laydate.render({
            elem: '#created_at_withdrawal', //指定元素
            type:'year',
            format:'yyyy',
            value:y,
        });
    });

    layui.use(['layer', 'echarts', "form", "popup"], function () {
        var $ = layui.jquery,
            echarts = layui.echarts;

        let getData = function (field,Echart,name,unit) {
            layui.$.ajax({
                url: StatisticsApi,
                type: "POST",
                dateType: "json",
                data: field,
                success: function (res) {
                    if (res.code) {
                        return layui.popup.failure(res.msg);
                    }

                    let option = setEchart(res.data,name,unit);
                    // 使用刚指定的配置项和数据显示图表。
                    Echart.setOption(option);

                    $(window).resize(function () {
                        Echart.resize();
                    });
                    return false;
                },
                error: function () {
                    layui.popup.failure('网络错误');
                    return false;
                }
            });
        }

        let setEchart = function (data,name,unit){
            var option;
            let bgColor = "#fff";
            let xAxisData = data.xAxisData;
            let seriesData = data.seriesData;
            option = {
                backgroundColor: bgColor,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [name]
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {show: true},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: xAxisData
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        name: '单位：'+unit,
                    }
                ],
                series: [
                    {
                        name: name,
                        type: 'bar',
                        barGap: 0,
                        emphasis: {
                            focus: 'series'
                        },
                        data: seriesData
                    }
                ]
            };

            return option;
        }

        var echarts_user = echarts.init(document.getElementById('echarts_user'), 'walden');
        getData({created_at:$('#created_at_user').val(),type:'user'},echarts_user,'注册人数','人');
        layui.form.on("submit(statistics_user)", function (data) {
            getData(data.field,echarts_user,'注册人数','人');
            return false;
        });

        var echarts_recharge = echarts.init(document.getElementById('echarts_recharge'), 'walden');
        getData({created_at:$('#created_at_recharge').val(),type:'recharge'},echarts_recharge,'充值金额','元');
        layui.form.on("submit(statistics_recharge)", function (data) {
            getData(data.field,echarts_recharge,'充值金额','元');
            return false;
        });

        var echarts_withdrawal = echarts.init(document.getElementById('echarts_withdrawal'), 'walden');
        getData({created_at:$('#created_at_withdrawal').val(),type:'withdrawal'},echarts_withdrawal,'提现金额','元');
        layui.form.on("submit(statistics_withdrawal)", function (data) {
            getData(data.field,echarts_recharge,'充值金额','元');
            return false;
        });
    });
</script>
</body>
</html>
